﻿@using MoqWord.Components.Components.FaIcon
@page "/"
@using ReactiveUI.Blazor
@inherits ReactiveComponentBase<PlayService>


<div class="IndexContainer">
   
    <div class="Body">
        <div class="nextWord">
            @if (playService.PreviousWord is not null)
            {
                <div class="switch left" @onclick="playService.Previous">
                    <FaIcon IsInherit="true" Class="arrow" Type="fa-arrow-left-long" />
                    <div class="wordInfo">
                        <span class="word">@playService.PreviousWord?.WordName</span>
                        <span class="describe">@playService.PreviousWord?.Translation</span>
                    </div>
                </div>
            }
            @if (playService.LastWord is not null)
            {
            <div class="switch right" @onclick="playService.Next">
                <div class="wordInfo">
                    <span class="word">@playService.LastWord?.WordName</span>
                    <span class="describe">@playService.LastWord?.Translation</span>
                </div>
                    <FaIcon IsInherit="true" Class="arrow" Type="fa-arrow-right-long" />
            </div>
                
            }
        </div>
        <div class="wordView">
            <div class="currentWord">
                <Title Level="1" class="word">@playService.CurrentWord?.WordName</Title>
                <Text class="annotation">美：@playService.CurrentWord?.AnnotationUk  英：@playService.CurrentWord?.AnnotationUs</Text>
                <Text Strong="true" class="translation">@playService.CurrentWord?.Translation</Text>
            </div>
        </div>
    </div>
    <div class="absolute bottom-0 left-0 w-full min-h-[120px] flex flex-row p-[20px] box-border items-center justify-center gap-6 bg-white">
        <FaIcon Type="fa-backward-step" Size="38px" OnClick=@(()=> playService.Previous()) />
        <div @onclick=@(PlayOrStop) class="rounded-full bg-gray-300 hover:bg-gray-200 hover:cursor-pointer hover:text-blue-300 flex items-center justify-center w-[60px] h-[60px]">
            @if (!playService.IsLoopPlay)
            {
                <FaIcon Type="fa-play" IsInherit="true"/>
            }
            else
            {
                <FaIcon Type="fa-stop" IsInherit="true"/>
            }
        </div>
        <FaIcon Type="fa-forward-step" Size="38px" OnClick=@(()=> playService.Next()) />
    </div>
   @*  <div class="footBar">
        <Flex Vertical="true" Align="center" Style="flex-basis: 120px">
            <Title Level="4" Style="margin-bottom: 0; ">00：01</Title>
            <Divider Style="margin: 10px 0"/>
            <Text>时间</Text>
        </Flex>

        <Flex Vertical="true" Align="center" Style="flex-basis: 120px">
            <Title Level="4" Style="margin-bottom: 0">00：01</Title>
            <Divider Style="margin: 10px 0" />
            <Text>输入数</Text>
        </Flex>
        <Flex Vertical="true" Align="center" Style="flex-basis: 120px">
            <Title Level="4" Style="margin-bottom: 0">00：01</Title>
            <Divider Style="margin: 10px 0"/>
            <Text>正确数</Text>
        </Flex>
        <Flex Vertical="true" Align="center" Style="flex-basis: 120px">
            <Title Level="4" Style="margin-bottom: 0">00：01</Title>
            <Divider Style="margin: 10px 0"/>
            <Text>正确率</Text>
        </Flex>
    </div> *@
</div>
<style>
    .Body, .IndexContainer {
       position: relative;
       width: 100%;
       height: 100%;
    }

        .IndexContainer .Body{
            display: grid;
            grid-template-rows: 100px 1fr;
        }

            .IndexContainer .Body .nextWord, .IndexContainer .Body .nextWord .switch{
                flex: 1;
                display: flex;
                flex-direction: row;
                gap: 20px;
                transition: all .5s;
            }

                .IndexContainer .Body .nextWord .switch:hover{
                    cursor: pointer;
                    color: #BCBCBC;
                }
            .IndexContainer .Body .nextWord{
                align-items: center;
                justify-content: space-between;
                padding: 40px;
                box-sizing: border-box;
            }

                .IndexContainer .Body .nextWord .right{
                    justify-content: flex-end;
                }
                .IndexContainer .Body .nextWord .wordInfo {
                    display: flex;
                    flex-direction: column;
                }

                    .IndexContainer .Body .nextWord .wordInfo .word{
                        font-size: 22px;
                        font-weight: bold;
                    }

    .wordView, .wordView .currentWord {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .wordView{
        height: 100%;
    }
    .wordView .currentWord {
        margin-bottom: 220px;
    }
    .IndexContainer .footBar{
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        min-height: 120px;
        background: #fff;
        display: flex;
        flex-direction: row;
        padding: 20px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
</style>